<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>购物车</title>
		<script src="html5plus://ready"></script>
	    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.6/lib/index.css">
		<script src="../../libs/js/vue.min.js"></script>
		<script src="../../libs/js/vant.min.js"></script>
	    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	</head>
	<body>
		<div id="app">
			<van-nav-bar title="购物车" right-text="清空购物车" @click-right="onClickRight" style="background-color: #FF0000;"></van-nav-bar>
			<ul id="shopping">
				<li v-for="(i,index) in shopp">
					<van-row >
						<van-col span="2" id="checks">
							<van-checkbox v-model="check[index]"></van-checkbox>
						</van-col>
						<van-col span="22">
							<van-card :num="i.count" :tag="i.tag" :price="i.price" :desc="i.desc" :title="i.title" :thumb="i.imageURL" :origin-price="i.yuanjia">
								<div slot="footer">
									<van-button size="mini" @click="i.count--" v-bind:disabled="i.count==0">-</van-button>
									<input type="text" min="1" size="mini" style="width: 30px;" :value="i.count" onkeyup = "value=value.replace(/[^\d]/g,'')" />
									<van-button size="mini" @click="i.count++">+</van-button>
									<van-button size="mini" @click="dalete(index)">
										<van-icon name="delete" ></van-icon>
									</van-button>
								</div>
							</van-card>
						</van-col>
					</van-row>
				</li>
			</ul>
		
			<van-submit-bar :price="tjprice" button-text="提交订单" @submit="onSubmit">
			    <van-checkbox v-model="checked" @change="quanxuan">全选</van-checkbox>
			    
			</van-submit-bar>
		</div>
		<script type="text/javascript">
			var vm=new Vue({
				el:"#app",
				data:{
					check:[
						0,0,0,0
					],
					checked:false,
					tjprice:0,
					shopp:[
						{
							id:1,
							title:"Huawei/华为 nova4极点全面屏超广角三摄高清易烊千玺代言华为官方旗舰店铺正品手机",
							imageURL:"../../img/images/1614519.png",
							yuanjia:2499.00,
							price:2399.00,
							tag:"",
							desc:"nova4",
							count:1,
						},
						{
							id:2,
							title:"Huawei/华为 nova4极点全面屏超广角三摄高清易烊千玺代言华为官方旗舰店铺正品手机",
							imageURL:"../../img/images/1614519.png",
							yuanjia:2499.00,
							price:2399.00,
							tag:"",
							desc:"nova4",
							count:2,
						},
						{
							id:3,
							title:"Huawei/华为 nova4极点全面屏超广角三摄高清易烊千玺代言华为官方旗舰店铺正品手机",
							imageURL:"../../img/images/1614519.png",
							yuanjia:2499.00,
							price:2399.00,
							tag:"",
							desc:"nova4",
							count:3,
						},
						{
							id:4,
						title:"Huawei/华为 nova4极点全面屏超广角三摄高清易烊千玺代言华为官方旗舰店铺正品手机",
							imageURL:"../../img/images/1614519.png",
							yuanjia:2499.00,
							price:2399.00,
							tag:"",
							desc:"nova4",
							count:6,
						}
					],
				},
				methods:{
					onClickRight:function() {				// Toast('购物车右上角清空购物车');
					    this.$dialog.confirm({
					   	    title: '确认要删除这些宝贝吗？',
					   	    message: '',
					   	}).then(() => {
					   		$("#shopping").remove();
					   	    // on confirms点击确认函数
					   	}).catch(() => {
					   	    // on cancel点击取消函数
					    });
					},
					dalete:function(x){						//点击删除按钮
						this.$dialog.confirm({
							  title: '确认要删除这个宝贝吗？',
							  message: '',
							}).then(() => {
								this.shopp.splice(x,1);
								//splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。
							    // on confirms点击确认函数
							}).catch(() => {
							  // on cancel点击取消函数
						});	
					},
					onSubmit:function(){					//点击提交订单
						var flag=false;
						for(var i=0;i<this.check.length;i++){
							if(this.check[i]==1){
// 								n=i+1;
// 								this.$toast('你选中了第"+n+"个！');
								var zhifu= plus.webview.open( "submitorder.html", "zhifu",{		//跳转只支付页面
									top:"",
									bottom:"",
									zindex:1,
									scrollIndicator:'none'
								});
								break ;
							}
						}
						if(!flag){
							this.$toast('请选择一个商品！');
							return false;
						}
					},
					quanxuan:function(){									//全部选中
						if(this.checked==true){
							for(var i=0;i<this.check.length;i++){
								this.check[i]=0;
							}
						}else{
							for(var i=0;i<this.check.length;i++){
								this.check[i]=1;
							}
						}
					},
				},
				created:function(){
					document.addEventListener('plusready', function(){
						//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"
					});	
				},
				computed:{					
					tjprice:function(){	
						for(var i=0;i<this.check.length;i++){
							if(this.check[i]){
								this.tjprice=this.check[i].price*this.check[i].count+this.tjprice;
							}
							return this.tjprice;
						}
					}					
				}
			})
		</script>
		
		
	</body>
</html>